<template>
  <view class="pro" :style="form.checkopen?'padding-bottom: 24rpx':''">
    <view class="pro-tlt">
      <view class="fs30 c1 fw400 pro-name">{{ title }}:{{ form.itemName }}</view>
      <view class="pro-right">
        <view class="pro-delete" @click.stop="deleteMain(form.itemNameId)">
          <ve-icon name="delete_2" size="40" color="#F53F3F" />
          <text class="fs28 fw400 c5 delete-button">删除</text>
        </view>
        <view class="pro-open" @click.stop="openClose">
          <text class="fs28 fw400 c3 open-button">{{ form.checkopen ? '收起' : '展开' }}</text>
          <ve-icon v-if="form.checkopen" name="arrow_bottom_1" size="28" />
          <ve-icon v-else name="arrow_top_1" size="28" />
        </view>
      </view>
    </view>
    <view class="pro-msg" v-if="form.checkopen">
      <ve-form-item label="品牌">
        <ve-input v-model="form.brand" placeholder="请输入" :maxlength="20" />
      </ve-form-item>
      <ve-form-item label="单价" unit="元">
        <ve-input-number v-model="form.unitPrice" :min="0" @blur="count" :max="99999999.99" :precision="2" placeholder="请输入" />
      </ve-form-item>
      <ve-form-item label="数量">
        <ve-input-number v-model="form.costQuantity" :min="0" @blur="count" :max="99999999" :precision="0" placeholder="请输入" />
      </ve-form-item>
      <!-- 维修 保养， 总价必填 -->
      <ve-form-item label="总价" unit="元" required :prop="`feeDetailList.${index}.amount`">
        <ve-input-number v-model="form.amount" :min="0" @blur="allCount" :max="99999999.99" :precision="2" placeholder="请输入" />
      </ve-form-item>
      <ve-form-item label="备注" :borderBottom="false" labelPosition="top">
        <ve-input v-model="form.remark" placeholder="请输入" type="textarea" :maxlength="200" />
      </ve-form-item>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const porps = defineProps({
    form: Object,
    title: String,
    index: [String, Number],
  })
  const rules = ref({
    amount: {
      required: true,
      message: '请输入',
    },
  })
  if (porps.form) {
    porps.form.checkopen = true
  }
  const openClose = () => {
    porps.form.checkopen = !porps.form.checkopen
  }
  // let form = ref()
  // form.value = porps.data
  const emit = defineEmits(['allAmount', 'itemNameDelete'])
  const count = () => {
    porps.form.amount = ( porps.form.unitPrice && porps.form.costQuantity ) ? (porps.form.unitPrice*porps.form.costQuantity) : null
    emit('allAmount')
  }
  const allCount = () => {
    emit('allAmount')
  }
  const deleteMain = (itemNameId) => {
    emit('itemNameDelete', itemNameId)
    count()
  }
</script>

<style lang="scss" scoped>
  .pro {
    background: #f7f8fa;
    padding: 0 24rpx;
    .pro-tlt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 86rpx;
      .pro-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 300rpx;
      }
      .pro-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .pro-delete {
          margin-right: 32rpx;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .delete-button {
            margin-right: 12rpx;
            margin-left: 14rpx;
          }
        }
        .pro-open {
          display: flex;
          justify-content: center;
          align-items: center;
          .open-button {
            margin-right: 12rpx;
          }
        }
      }
    }
    .pro-msg {
      width: 100%;
      padding: 12rpx 24rpx 0;
      background: #eff0f2;
      .pro-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 32rpx;
        .pro-brand {
          width: 180rpx;
        }
        .pro-brand-name {
          flex: 1;
          margin-left: 20rpx;
        }
      }
    }
  }
</style>
